/*
SCSS variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: $icon-home-width;
}

The large array-like variables contain all information about a single icon
$icon-home: x y offset_x offset_y width height total_width total_height image_path;

At the bottom of this section, we provide information about the spritesheet itself
$spritesheet: width height image $spritesheet-sprites;
*/
$icon-back-top-name: 'icon_back_top';
$icon-back-top-x: 0px;
$icon-back-top-y: 70px;
$icon-back-top-offset-x: 0px;
$icon-back-top-offset-y: -70px;
$icon-back-top-width: 86px;
$icon-back-top-height: 86px;
$icon-back-top-total-width: 314px;
$icon-back-top-total-height: 274px;
$icon-back-top-image: '../../../wwwroot/image/sprite.png';
$icon-back-top: (0px, 70px, 0px, -70px, 86px, 86px, 314px, 274px, '../../../wwwroot/image/sprite.png', 'icon_back_top', );
$icon-index-clock-name: 'icon_index_clock';
$icon-index-clock-x: 287px;
$icon-index-clock-y: 76px;
$icon-index-clock-offset-x: -287px;
$icon-index-clock-offset-y: -76px;
$icon-index-clock-width: 24px;
$icon-index-clock-height: 24px;
$icon-index-clock-total-width: 314px;
$icon-index-clock-total-height: 274px;
$icon-index-clock-image: '../../../wwwroot/image/sprite.png';
$icon-index-clock: (287px, 76px, -287px, -76px, 24px, 24px, 314px, 274px, '../../../wwwroot/image/sprite.png', 'icon_index_clock', );
$icon-index-download-name: 'icon_index_download';
$icon-index-download-x: 86px;
$icon-index-download-y: 70px;
$icon-index-download-offset-x: -86px;
$icon-index-download-offset-y: -70px;
$icon-index-download-width: 140px;
$icon-index-download-height: 50px;
$icon-index-download-total-width: 314px;
$icon-index-download-total-height: 274px;
$icon-index-download-image: '../../../wwwroot/image/sprite.png';
$icon-index-download: (86px, 70px, -86px, -70px, 140px, 50px, 314px, 274px, '../../../wwwroot/image/sprite.png', 'icon_index_download', );
$icon-index-download-close-name: 'icon_index_download_close';
$icon-index-download-close-x: 40px;
$icon-index-download-close-y: 232px;
$icon-index-download-close-offset-x: -40px;
$icon-index-download-close-offset-y: -232px;
$icon-index-download-close-width: 40px;
$icon-index-download-close-height: 40px;
$icon-index-download-close-total-width: 314px;
$icon-index-download-close-total-height: 274px;
$icon-index-download-close-image: '../../../wwwroot/image/sprite.png';
$icon-index-download-close: (40px, 232px, -40px, -232px, 40px, 40px, 314px, 274px, '../../../wwwroot/image/sprite.png', 'icon_index_download_close', );
$icon-index-logo-name: 'icon_index_logo';
$icon-index-logo-x: 0px;
$icon-index-logo-y: 0px;
$icon-index-logo-offset-x: 0px;
$icon-index-logo-offset-y: 0px;
$icon-index-logo-width: 238px;
$icon-index-logo-height: 70px;
$icon-index-logo-total-width: 314px;
$icon-index-logo-total-height: 274px;
$icon-index-logo-image: '../../../wwwroot/image/sprite.png';
$icon-index-logo: (0px, 0px, 0px, 0px, 238px, 70px, 314px, 274px, '../../../wwwroot/image/sprite.png', 'icon_index_logo', );
$icon-index-luckydraw-name: 'icon_index_luckydraw';
$icon-index-luckydraw-x: 152px;
$icon-index-luckydraw-y: 156px;
$icon-index-luckydraw-offset-x: -152px;
$icon-index-luckydraw-offset-y: -156px;
$icon-index-luckydraw-width: 76px;
$icon-index-luckydraw-height: 76px;
$icon-index-luckydraw-total-width: 314px;
$icon-index-luckydraw-total-height: 274px;
$icon-index-luckydraw-image: '../../../wwwroot/image/sprite.png';
$icon-index-luckydraw: (152px, 156px, -152px, -156px, 76px, 76px, 314px, 274px, '../../../wwwroot/image/sprite.png', 'icon_index_luckydraw', );
$icon-index-order-name: 'icon_index_order';
$icon-index-order-x: 76px;
$icon-index-order-y: 156px;
$icon-index-order-offset-x: -76px;
$icon-index-order-offset-y: -156px;
$icon-index-order-width: 76px;
$icon-index-order-height: 76px;
$icon-index-order-total-width: 314px;
$icon-index-order-total-height: 274px;
$icon-index-order-image: '../../../wwwroot/image/sprite.png';
$icon-index-order: (76px, 156px, -76px, -156px, 76px, 76px, 314px, 274px, '../../../wwwroot/image/sprite.png', 'icon_index_order', );
$icon-index-signin-name: 'icon_index_signin';
$icon-index-signin-x: 238px;
$icon-index-signin-y: 0px;
$icon-index-signin-offset-x: -238px;
$icon-index-signin-offset-y: 0px;
$icon-index-signin-width: 76px;
$icon-index-signin-height: 76px;
$icon-index-signin-total-width: 314px;
$icon-index-signin-total-height: 274px;
$icon-index-signin-image: '../../../wwwroot/image/sprite.png';
$icon-index-signin: (238px, 0px, -238px, 0px, 76px, 76px, 314px, 274px, '../../../wwwroot/image/sprite.png', 'icon_index_signin', );
$icon-index-testeat-name: 'icon_index_testeat';
$icon-index-testeat-x: 0px;
$icon-index-testeat-y: 156px;
$icon-index-testeat-offset-x: 0px;
$icon-index-testeat-offset-y: -156px;
$icon-index-testeat-width: 76px;
$icon-index-testeat-height: 76px;
$icon-index-testeat-total-width: 314px;
$icon-index-testeat-total-height: 274px;
$icon-index-testeat-image: '../../../wwwroot/image/sprite.png';
$icon-index-testeat: (0px, 156px, 0px, -156px, 76px, 76px, 314px, 274px, '../../../wwwroot/image/sprite.png', 'icon_index_testeat', );
$icon-nav-cart-name: 'icon_nav_cart';
$icon-nav-cart-x: 238px;
$icon-nav-cart-y: 76px;
$icon-nav-cart-offset-x: -238px;
$icon-nav-cart-offset-y: -76px;
$icon-nav-cart-width: 49px;
$icon-nav-cart-height: 42px;
$icon-nav-cart-total-width: 314px;
$icon-nav-cart-total-height: 274px;
$icon-nav-cart-image: '../../../wwwroot/image/sprite.png';
$icon-nav-cart: (238px, 76px, -238px, -76px, 49px, 42px, 314px, 274px, '../../../wwwroot/image/sprite.png', 'icon_nav_cart', );
$icon-nav-home-name: 'icon_nav_home';
$icon-nav-home-x: 238px;
$icon-nav-home-y: 118px;
$icon-nav-home-offset-x: -238px;
$icon-nav-home-offset-y: -118px;
$icon-nav-home-width: 44px;
$icon-nav-home-height: 42px;
$icon-nav-home-total-width: 314px;
$icon-nav-home-total-height: 274px;
$icon-nav-home-image: '../../../wwwroot/image/sprite.png';
$icon-nav-home: (238px, 118px, -238px, -118px, 44px, 42px, 314px, 274px, '../../../wwwroot/image/sprite.png', 'icon_nav_home', );
$icon-nav-type-name: 'icon_nav_type';
$icon-nav-type-x: 238px;
$icon-nav-type-y: 160px;
$icon-nav-type-offset-x: -238px;
$icon-nav-type-offset-y: -160px;
$icon-nav-type-width: 42px;
$icon-nav-type-height: 42px;
$icon-nav-type-total-width: 314px;
$icon-nav-type-total-height: 274px;
$icon-nav-type-image: '../../../wwwroot/image/sprite.png';
$icon-nav-type: (238px, 160px, -238px, -160px, 42px, 42px, 314px, 274px, '../../../wwwroot/image/sprite.png', 'icon_nav_type', );
$icon-nav-user-name: 'icon_nav_user';
$icon-nav-user-x: 0px;
$icon-nav-user-y: 232px;
$icon-nav-user-offset-x: 0px;
$icon-nav-user-offset-y: -232px;
$icon-nav-user-width: 40px;
$icon-nav-user-height: 42px;
$icon-nav-user-total-width: 314px;
$icon-nav-user-total-height: 274px;
$icon-nav-user-image: '../../../wwwroot/image/sprite.png';
$icon-nav-user: (0px, 232px, 0px, -232px, 40px, 42px, 314px, 274px, '../../../wwwroot/image/sprite.png', 'icon_nav_user', );
$spritesheet-width: 314px;
$spritesheet-height: 274px;
$spritesheet-image: '../../../wwwroot/image/sprite.png';
$spritesheet-sprites: ($icon-back-top, $icon-index-clock, $icon-index-download, $icon-index-download-close, $icon-index-logo, $icon-index-luckydraw, $icon-index-order, $icon-index-signin, $icon-index-testeat, $icon-nav-cart, $icon-nav-home, $icon-nav-type, $icon-nav-user, );
$spritesheet: (314px, 274px, '../../../wwwroot/image/sprite.png', $spritesheet-sprites, );

/*
The provided mixins are intended to be used with the array-like variables

.icon-home {
  @include sprite-width($icon-home);
}

.icon-email {
  @include sprite($icon-email);
}
*/
@mixin sprite-width($sprite) {
  width: nth($sprite, 5);
}

@mixin sprite-height($sprite) {
  height: nth($sprite, 6);
}

@mixin sprite-position($sprite) {
  $sprite-offset-x: nth($sprite, 3);
  $sprite-offset-y: nth($sprite, 4);
  background-position: $sprite-offset-x  $sprite-offset-y;
}

@mixin sprite-image($sprite) {
  $sprite-image: nth($sprite, 9);
  background-image: url(#{$sprite-image});
}

@mixin sprite($sprite) {
  @include sprite-image($sprite);
  @include sprite-position($sprite);
  @include sprite-width($sprite);
  @include sprite-height($sprite);
}

/*
The `sprites` mixin generates identical output to the CSS template
  but can be overridden inside of SCSS

@include sprites($spritesheet-sprites);
*/
@mixin sprites($sprites) {
  @each $sprite in $sprites {
    $sprite-name: nth($sprite, 10);
    .#{$sprite-name} {
      @include sprite($sprite);
    }
  }
}
